<!DOCTYPE html>
<html>

<head>
    <title>CSS 3D Rotate With Mouse Move</title>
    <style>
        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            transform-style: preserve-3d;
            perspective: 500px;
            cursor: pointer;
            background: #000;
        }

        #element {
            margin: auto;
            width: 250px;
            height: 400px;
            background: linear-gradient(45deg, black, deeppink, #6006ff);
            border-radius: 10px;
            transform-style: preserve-3d;
            transition: all .1s;
        }

        #g-img {
            position: relative;
            width: 100%;
            height: 100%;
            background:
                url('https://key-drop.com/cdn-cgi/image/format=auto,width=270,dpr=2/uploads/skins/JAINA.png');
            background-size: cover;
            background-position: center;
            border-radius: 10px;
            filter: brightness(1.2);

            &::after {
                content: "";
                display: none;
                position: absolute;
                inset: 0;
                border-radius: 10px;
                background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/13471/sparkles.gif");
                mix-blend-mode: color-dodge;
            }

            &::before {
                content: "";
                display: none;
                position: absolute;
                inset: 0;
                border-radius: 10px;
                background:
                    linear-gradient(115deg,
                        transparent 0%,
                        #06e8ff var(--per),
                        #ffab2e calc(var(--per) + 25%),
                        #ff2212 calc(var(--per) + 50%),
                        transparent 100%);
                mix-blend-mode: color-dodge;
            }

            &:hover::after,
            &:hover::before {
                display: block;
            }
        }
    </style>
</head>

<body>
    <div id="element">
        <div id="g-img"></div>
    </div>
    <script>
        const multiple = 15;
        const mouseOverContainer = document.getElementsByTagName("body")[0];
        const element = document.getElementById("element");
        const img = document.getElementById("g-img");

        function transformElement(x, y) {
            let box = element.getBoundingClientRect();
            const calcX = -(y - box.y - box.height / 2) / multiple;
            const calcY = (x - box.x - box.width / 2) / multiple;
            const percentage = parseInt((x - box.x) / box.width * 1000) / 10;

            element.style.transform = "rotateX(" + calcX + "deg) " + "rotateY(" + calcY + "deg)";
            img.style = `--per: ${percentage}%`;
        }

        mouseOverContainer.addEventListener("mousemove", (e) => {
            window.requestAnimationFrame(function () {
                transformElement(e.clientX, e.clientY);
            });
        });

        mouseOverContainer.addEventListener("mouseleave", (e) => {
            window.requestAnimationFrame(function () {
                element.style.transform = "rotateX(0) rotateY(0)";
            });
        });
    </script>
</body>

</html>